<template>
    <div class="p-container" v-loading="loading">
      <el-tree
        class="left"
        ref="menu"
        :data="menus"
        @node-click="handleMenuClick"
        :default-checked-keys="menuIds"
        :props="defaultProps"
        accordion
        show-checkbox
        node-key="id"
      />
      <el-card class="box-card right" v-loading="resourcesLoading">
        <el-checkbox  v-for="(item,i) in menuResources" v-model="item.checked">{{item.name}}</el-checkbox>
      </el-card>
    </div>
</template>

<script>
  import {getMenus,getMenuResources} from '@/api/system/agentMenu'
  import {getAuth,saveAuth} from '@/api/customer/agentAuth'
    export default {
        name: "userPermission",
        props:{
            agentID:{
                type:Number,
                required:true
            }
        },
        data(){
            return {
                loading:false,
                menus:[],
                menuIds:[],//已授权菜单ID集合
                defaultProps: { children: 'children', label: 'name' },
                menuResources:[],
                resourcesLoading:false,
                initCount:0,//
            }
        },
        methods:{
            init(){
                this.menuResources=[]
                this.loading=true
                getMenus({}).then(res=>{
                    this.menus=res.content
                    this.checkInit()
                })
                getAuth(this.agentID).then(res=>{
                    this.menuIds=res
                    this.checkInit()
                })
            },
            checkInit(){
                let count=this.initCount
                count++
                if(count==2){
                    this.loading=false
                }else{
                    this.initCount=count
                }
            },
            handleMenuClick(data){
                this.resourcesLoading=true
                getMenuResources(data.id).then(res=>{
                    this.resourcesLoading=false
                    res.forEach(item=> {
                        if(this.menuIds.includes(item.id)){
                            item.checked=true
                        }else{
                            item.checked=false
                        }
                    })
                    this.menuResources=res
                })
            },
            savePermission(callback){
                const authMenuIDs = this.$refs.menu.getCheckedNodes().filter(item=>item.component).map((item,index) =>{
                    return item.id
                })
                const resourcesIDs=this.menuResources.filter(item=>item.checked).map((item,index)=>{
                    return item.id
                })
                saveAuth(this.agentID,authMenuIDs.concat(resourcesIDs)).then(res=>{
                    callback()
                })
            },
        }
    }
</script>

<style scoped>
.p-container,.box-card{
  display: flex;
}
  .left{
    width: 40%;
  }
.right{
  width: 60%;
}
</style>
